<template>
  <div v-if="showModal" @click="$emit('update:showModal', false)" class="modal-wrapper">
    <div class="modal">
      <h3>СООБЩЕНИЕ ОТПРАВЛЕННО</h3>
    </div>
    <img src="../assets/img/planModal.png" class="plan-modal" height="401" width="501"/>
    <img src="../assets/img/mobilModal.png" class="mobile-modal" height="251" width="281"/>
  </div>
</template>
<script setup>
import {defineProps, onMounted} from "vue";

const props = defineProps({
  showModal : {
    type: Boolean,
  }
})

onMounted(() => {
  console.log(props.showModal)
})

</script>
<style lang="scss" scoped>
.modal-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  background: rgba(0, 0, 0, 0.27);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  .modal {
    background-image: url("./../assets/img/deskModal.png");
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 800px;

    h3 {
      color: #FFFFFF;
      font-size: 43px;
    }

    @media (min-width: 1981px) {
      display: none;
    }
    @media (max-width: 1000px) {
      display: none;
    }
  }
  .plan-modal {
    @media (min-width: 1000px) {
      display: none;
    }
    @media (max-width: 500px) {
      display: none;
    }
  }
  .mobile-modal {
    @media (min-width: 500px) {
      display: none;
    }
  }
}
</style>